<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/scrollBar.css" rel="stylesheet" type="text/css" />
    <link href="css/commen.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="scrollBox" id="box1">
    <div class="contentBox1">

    </div>
</div>
<div class="scrollBox" id="box2">
    <div class="contentBox2">

    </div>
</div>
<div class="scrollBox" id="box3">
    <div class="contentBox3">

    </div>
</div>
<div class="scrollBox" id="box4">
    <h4>操作框</h4>
    <button id="btn1">增加第一张图片的高度</button>
    <button id="btn2">还原第一张图片的高度</button>
</div>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/scrollBar.js"></script>
<script>
    $(function(){
        $(".scrollBox").scrollBar();

        $("#btn1").click(function(){
            $("#box1 .contentBox1").height($("#box1 .contentBox1").height()+300);
        });
        $("#btn2").click(function(){
            $("#box1 .contentBox1").height(900);
        });
    })
</script>
</body>
</html>